<template>
  <div id="listContainer " style="padding-bottom: 40px">
    <div class="list">
      <div class="listheader">
        <i class="shouyelift el-icon-d-arrow-left"></i>
        <i class="el-icon-s-home">首页</i>
        <div class="center">
          <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="handleClick">
            <el-tab-pane
              v-for="(item, index) in editableTabs"
              :key="index"
              :label="item.title"
              :name="item.name"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <i class="shouyeright el-icon-d-arrow-right"></i>
        <i class="shouyeright2 el-icon-arrow-up"></i>
      </div>
      <router-view />
    </div>
  </div>
</template>
<script>
  // import { mapState } from "vuex";
  export default {
    name: 'listContainer',
    data() {
      return {
        circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        editableTabsValue: '1',
        editableTabs: [
          {
            title: 'Tab 1',
            name: '1',
            content: 'Tab 1 content',
            router1: '/projectList/papersList',
            yemian: ''
          },
          {
            title: 'Tab 2',
            name: '2',
            content: 'Tab 2 content',
            router1: '/projectList/paperl'
          }
        ],
        tabIndex: 2
      };
    },
    mounted() {},
    computed: {
      // ...mapState(["editableTabsValue", "editableTabs", "tabIndex"]),
    },
    methods: {
      //   addTab(targetName) {
      //     let newTabName = ++this.tabIndex + '';
      //     this.editableTabs.push({
      //       title: 'New Tab',
      //       name: newTabName,
      //       content: 'New Tab content'
      //     });
      //     this.editableTabsValue = newTabName;
      //   },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
      },
      handleClick(targetName) {
        let tabs = this.editableTabs;
        tabs.forEach((tab) => {
          if (tab.name == parseInt(Number(targetName.index) + 1)) {
            console.log(tab);
            console.log(`#` + tab.router1);
            if (window.location.hash !== `#` + tab.router1) {
              console.log('in');
              this.$router.push({ path: tab.router1 });
            }
          }
        });
      }
    },
    watch: {
      $route: {
        handler(val, oldval) {
          console.log(val, oldval);
        },
        // 深度观察监听
        deep: true
      }
    }
  };
</script>
<style lang="scss">
  .list {
    width: 95%;
    height: 900px;
    margin: auto;
    margin-top: -200px;
    box-sizing: border-box;
    background-color: #ffffff;
    z-index: 1;
    border-radius: 20px;

    .listheader {
      height: 50px;
      width: 100%;
      background-color: #eff3f9;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      box-sizing: border-box;
      .shouyelift,
      .shouyeright,
      .shouyeright2,
      .el-icon-s-home {
        line-height: 50px;
        display: inline-block;
        font-style: normal;
      }
      .shouyeright2 {
        padding-left: 15px;
        border-left: 1px solid #e0e4e8;
        margin-left: 15px;
      }
      .el-icon-s-home {
        height: 16px;
        margin: 0 15px;
      }
      .center {
        flex-grow: 1;
      }
      .el-tabs__header,
      .el-tabs__nav-scroll,
      .el-tabs__nav,
      .el-tabs__item {
        height: 50px;
      }
      .el-tabs--card > .el-tabs__header,
      .el-tabs--card > .el-tabs__header .el-tabs__item,
      .el-tabs--card > .el-tabs__header .el-tabs__item,
      .el-tabs--card > .el-tabs__header .el-tabs__nav {
        border: none;
      }
      .el-tabs__item {
        line-height: 50px;
      }
      .el-tabs__item:hover,
      .el-tabs__item.is-active {
        background: #ffffff;
      }
    }
  }
</style>
